<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Affan - PWA Mobile HTML Template">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

  <meta name="theme-color" content="#0134d4">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- Title -->
  <title>Affan - PWA Mobile HTML Template</title>

  <!-- Favicon -->
  <link rel="icon" href="img/core-img/favicon.ico">
  <link rel="apple-touch-icon" href="img/icons/icon-96x96.png">
  <link rel="apple-touch-icon" sizes="152x152" href="img/icons/icon-152x152.png">
  <link rel="apple-touch-icon" sizes="167x167" href="img/icons/icon-167x167.png">
  <link rel="apple-touch-icon" sizes="180x180" href="img/icons/icon-180x180.png">

  <!-- Style CSS -->
  <link rel="stylesheet" href="style.css">

  <!-- Web App Manifest -->
  <link rel="manifest" href="manifest.json">
</head>

<body>
  <!-- Preloader -->
  <div id="preloader">
    <div class="spinner-grow text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
  </div>

  <!-- Internet Connection Status -->
  <div class="internet-connection-status" id="internetStatus"></div>

  <!-- Dark mode switching -->
  <div class="dark-mode-switching">
    <div class="d-flex w-100 h-100 align-items-center justify-content-center">
      <div class="dark-mode-text text-center">
        <i class="bi bi-moon"></i>
        <p class="mb-0">Switching to dark mode</p>
      </div>
      <div class="light-mode-text text-center">
        <i class="bi bi-brightness-high"></i>
        <p class="mb-0">Switching to light mode</p>
      </div>
    </div>
  </div>

  <!-- RTL mode switching -->
  <div class="rtl-mode-switching">
    <div class="d-flex w-100 h-100 align-items-center justify-content-center">
      <div class="rtl-mode-text text-center">
        <i class="bi bi-text-right"></i>
        <p class="mb-0">Switching to RTL mode</p>
      </div>
      <div class="ltr-mode-text text-center">
        <i class="bi bi-text-left"></i>
        <p class="mb-0">Switching to default mode</p>
      </div>
    </div>
  </div>

  <!-- # Sidenav Left -->
  <div class="offcanvas offcanvas-start" id="affanOffcanvas" data-bs-scroll="true" tabindex="-1"
    aria-labelledby="affanOffcanvsLabel">

    <button class="btn-close btn-close-white text-reset" type="button" data-bs-dismiss="offcanvas"
      aria-label="Close"></button>

    <div class="offcanvas-body p-0">
      <div class="sidenav-wrapper">
        <!-- Sidenav Profile -->
        <div class="sidenav-profile bg-gradient">
          <div class="sidenav-style1"></div>

          <!-- User Thumbnail -->
          <div class="user-profile">
            <img src="img/bg-img/2.jpg" alt="">
          </div>

          <!-- User Info -->
          <div class="user-info">
            <h6 class="user-name mb-0">Affan Islam</h6>
            <span>CEO, Designing World</span>
          </div>
        </div>

        <!-- Sidenav Nav -->
        <ul class="sidenav-nav ps-0">
          <li>
            <a href="home.html"><i class="bi bi-house-door"></i> Home</a>
          </li>
          <li>
            <a href="elements.html"><i class="bi bi-folder2-open"></i> Elements
              <span class="badge bg-danger rounded-pill ms-2">220+</span>
            </a>
          </li>
          <li>
            <a href="pages.html"><i class="bi bi-collection"></i> Pages
              <span class="badge bg-success rounded-pill ms-2">100+</span>
            </a>
          </li>
          <li>
            <a href="#"><i class="bi bi-cart-check"></i> Shop</a>
            <ul>
              <li>
                <a href="shop-grid.html"> Shop Grid</a>
              </li>
              <li>
                <a href="shop-list.html"> Shop List</a>
              </li>
              <li>
                <a href="shop-details.html"> Shop Details</a>
              </li>
              <li>
                <a href="cart.html"> Cart</a>
              </li>
              <li>
                <a href="checkout.html"> Checkout</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="settings.html"><i class="bi bi-gear"></i> Settings</a>
          </li>
          <li>
            <div class="night-mode-nav">
              <i class="bi bi-moon"></i> Night Mode
              <div class="form-check form-switch">
                <input class="form-check-input form-check-success" id="darkSwitch" type="checkbox">
              </div>
            </div>
          </li>
          <li>
            <a href="login.html"><i class="bi bi-box-arrow-right"></i> Logout</a>
          </li>
        </ul>

        <!-- Social Info -->
        <div class="social-info-wrap">
          <a href="#">
            <i class="bi bi-facebook"></i>
          </a>
          <a href="#">
            <i class="bi bi-twitter"></i>
          </a>
          <a href="#">
            <i class="bi bi-linkedin"></i>
          </a>
        </div>

        <!-- Copyright Info -->
        <div class="copyright-info">
          <p>
            <span id="copyrightYear"></span>
            &copy; Made by <a href="#">Designing World</a>
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Header Area -->
  <div class="header-area" id="headerArea">
    <div class="container">
      <!-- Header Content -->
      <div class="header-content header-style-five position-relative d-flex align-items-center justify-content-between">
        <!-- Back Button -->
        <div class="back-button">
          <a href="pages.html">
            <i class="bi bi-arrow-left-short"></i>
          </a>
        </div>

        <!-- Page Title -->
        <div class="page-heading">
          <h6 class="mb-0">About</h6>
        </div>

        <!-- Navbar Toggler -->
        <div class="navbar--toggler" id="affanNavbarToggler" data-bs-toggle="offcanvas" data-bs-target="#affanOffcanvas"
          aria-controls="affanOffcanvas">
          <span class="d-block"></span>
          <span class="d-block"></span>
          <span class="d-block"></span>
        </div>
      </div>
    </div>
  </div>

  <div class="page-content-wrapper py-3">
    <div class="container">
      <div class="card image-gallery-card direction-rtl">
        <div class="card-body">
          <img class="mb-3 rounded" src="img/bg-img/13.jpg" alt="">
          <h5>Why do we use it?</h5>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when
            looking at its layout.</p>
          <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
            using 'Content here, content here', making it look like readable English.</p>
          <a class="btn btn-primary mb-4" href="#">Get A Quote</a>

          <div class="masonry-content-wrapper gallery-img mb-3">
            <!-- Single Masonry Image -->
            <a class="portfolio-item large single-gallery-item image-zooming-in-out" title="Gallery One"
              data-gall="gallery01" href="img/bg-img/4.jpg">
              <img src="img/bg-img/4.jpg" alt="">
              <!-- Fav Icon -->
              <div class="fav-icon shadow">
                <i class="bi bi-heart-fill"></i>
              </div>
            </a>

            <!-- Single Masonry Image -->
            <a class="portfolio-item small single-gallery-item image-zooming-in-out" title="Gallery Two"
              data-gall="gallery01" href="img/bg-img/5.jpg">
              <img src="img/bg-img/5.jpg" alt="">
              <!-- Fav Icon -->
              <div class="fav-icon shadow">
                <i class="bi bi-heart-fill"></i>
              </div>
            </a>

            <!-- Single Masonry Image -->
            <a class="portfolio-item large single-gallery-item image-zooming-in-out" title="Gallery Three"
              data-gall="gallery01" href="img/bg-img/6.jpg">
              <img src="img/bg-img/6.jpg" alt="">
              <!-- Fav Icon -->
              <div class="fav-icon shadow">
                <i class="bi bi-heart-fill"></i>
              </div>
            </a>

            <!-- Single Masonry Image -->
            <a class="portfolio-item small single-gallery-item image-zooming-in-out" title="Gallery Four"
              data-gall="gallery01" href="img/bg-img/7.jpg">
              <img src="img/bg-img/7.jpg" alt="">
              <!-- Fav Icon -->
              <div class="fav-icon shadow">
                <i class="bi bi-heart-fill"></i>
              </div>
            </a>
          </div>

          <h5>Where can I get some?</h5>
          <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
            in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

          <!-- Single Skill Progress Bar -->
          <div class="skill-progress-bar d-flex align-items-center">
            <!-- Skill Icon -->
            <div class="skill-icon shadow-sm p-2">
              <i class="bi bi-code text-dark fz-20"></i>
            </div>

            <div class="skill-data">
              <!-- Skill Name -->
              <div class="skill-name d-flex align-items-center justify-content-between">
                <p class="mb-1">HTML5</p>
                <small class="mb-1">
                  <span class="counter">78</span>%
                </small>
              </div>

              <!-- Progress -->
              <div class="progress" style="height: 4px;">
                <div class="progress-bar" style="width: 78%;" role="progressbar" aria-valuenow="78" aria-valuemin="0"
                  aria-valuemax="100"></div>
              </div>
            </div>
          </div>

          <!-- Single Skill Progress Bar -->
          <div class="skill-progress-bar d-flex align-items-center">
            <!-- Skill Icon -->
            <div class="skill-icon shadow-sm p-2">
              <i class="bi bi-heart text-danger fz-20"></i>
            </div>

            <div class="skill-data">
              <!-- Skill Name -->
              <div class="skill-name d-flex align-items-center justify-content-between">
                <p class="mb-1">PHP 8</p>
                <small class="mb-1">
                  <span class="counter">96</span>%
                </small>
              </div>

              <!-- Progress -->
              <div class="progress" style="height: 4px;">
                <div class="progress-bar bg-success" style="width: 96%;" role="progressbar" aria-valuenow="96"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
          </div>

          <!-- Single Skill Progress Bar -->
          <div class="skill-progress-bar d-flex align-items-center">
            <!-- Skill Icon -->
            <div class="skill-icon shadow-sm p-2 fz-20">
              <i class="bi bi-bootstrap text-primary"></i>
            </div>

            <div class="skill-data">
              <!-- Skill Name -->
              <div class="skill-name d-flex align-items-center justify-content-between">
                <p class="mb-1">Bootstrap 5</p>
                <small class="mb-1">
                  <span class="counter">88</span>%
                </small>
              </div>

              <!-- Progress -->
              <div class="progress" style="height: 4px;">
                <div class="progress-bar bg-info" style="width: 88%;" role="progressbar" aria-valuenow="88"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
          </div>

          <p class="mb-4">If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything
            embarrassing hidden in the middle of text.</p>

          <div class="row">
            <!-- Single Counter -->
            <div class="col-4">
              <div class="single-counter-wrap text-center mb-4">
                <i class="bi bi-basket mb-1 text-success"></i>
                <h4 class="mb-0 text-success">
                  <span class="counter">1400</span>+
                </h4>
              </div>
            </div>

            <!-- Single Counter -->
            <div class="col-4">
              <div class="single-counter-wrap text-center mb-4">
                <i class="bi bi-cup mb-1 text-primary"></i>
                <h4 class="mb-0 text-primary">
                  <span class="counter">16</span>k
                </h4>
              </div>
            </div>

            <!-- Single Counter -->
            <div class="col-4">
              <div class="single-counter-wrap text-center mb-4">
                <i class="bi bi-emoji-smile mb-1 text-danger"></i>
                <h4 class="mb-0 text-danger">
                  <span class="counter">963</span>+
                </h4>
              </div>
            </div>
          </div>

          <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi culpa repellendus
            voluptatem quod. Minus laudantium voluptatem asperiores! Itaque suscipit eos aliquid.</p>
          <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi culpa repellendus
            voluptatem quod. Minus laudantium voluptatem asperiores!</p>

          <a href="#" class="btn btn-primary mt-3 w-100">Contact Us</a>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer Nav -->
  <div class="footer-nav-area" id="footerNav">
    <div class="container px-0">
      <!-- Footer Content -->
      <div class="footer-nav position-relative">
        <ul class="h-100 d-flex align-items-center justify-content-between ps-0">
          <li class="active">
            <a href="home.html">
              <i class="bi bi-house"></i>
              <span>Home</span>
            </a>
          </li>

          <li>
            <a href="pages.html">
              <i class="bi bi-collection"></i>
              <span>Pages</span>
            </a>
          </li>

          <li>
            <a href="elements.html">
              <i class="bi bi-folder2-open"></i>
              <span>Elements</span>
            </a>
          </li>

          <li>
            <a href="chat-users.html">
              <i class="bi bi-chat-dots"></i>
              <span>Chat</span>
            </a>
          </li>

          <li>
            <a href="settings.html">
              <i class="bi bi-gear"></i>
              <span>Settings</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- All JavaScript Files -->
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/slideToggle.min.js"></script>
  <script src="js/internet-status.js"></script>
  <script src="js/tiny-slider.js"></script>
  <script src="js/venobox.min.js"></script>
  <script src="js/countdown.js"></script>
  <script src="js/rangeslider.min.js"></script>
  <script src="js/vanilla-dataTables.min.js"></script>
  <script src="js/index.js"></script>
  <script src="js/imagesloaded.pkgd.min.js"></script>
  <script src="js/isotope.pkgd.min.js"></script>
  <script src="js/dark-rtl.js"></script>
  <script src="js/active.js"></script>
  <script src="js/pwa.js"></script>
</body>

</html>